<script setup >
import { ref } from 'vue'
import router from '@/router'
const footerNavIndex = ref(0)
const switchNav = (nav) => {
    footerNavIndex.value = nav.index
    router.push(nav.path)
}
const footerNav = [
    {
        icon: require('@/assets/images/tabbar/message_h5.png'),
        activeIcon: require('@/assets/images/tabbar/message_h5_active.png'),
        index: 0,
        title: 'chat',
        path: '/'
    },
    {
        icon: require('@/assets/images/tabbar/users_h5.png'),
        activeIcon: require('@/assets/images/tabbar/users_h5_active.png'),
        index: 1,
        title: '通讯录',
        path: 'contacts'
    },
    {
        icon: require('@/assets/images/tabbar/my.png'),
        activeIcon: require('@/assets/images/tabbar/my_active.png'),
        index: 2,
        title: 'my',
        path: '/my'
    }
]
</script>
<template>
  <el-row class="footer_h5 fill_div">
    <el-col class="f_center" :span="24/footerNav.length" justify="center" align="center" v-for="item in footerNav" :key="item.index" @click="switchNav(item)">
      <!-- {{ item }} -->
      <div class="flex_col f_a_center gap_10px padding_20px">
        <img class="footer_h5_img" :src="
        footerNavIndex === item.index
          ? item.activeIcon
          : item.icon
      " alt="">
        <span :style="{color:footerNavIndex === item.index?'#5599fc':'#333'}">{{ $t(item.title) }}</span>
      </div>
    </el-col>
  </el-row>

</template>

<style lang="scss" scoped>
.footer_h5 {
    background: #f2f2f2;
    font-size: 50px;
    &_img {
        width: 100px;
        height: 100px;
        object-fit: contain;
    }
}
</style>
